body::-webkit-scrollbar {
	-webkit-appearance: none;
}

body::-webkit-scrollbar:vertical {
	width: 12px;
}

body::-webkit-scrollbar:horizontal {
	height: 12px;
}

body::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .5);
	border-radius: 10px;
	border: 2px solid #ffffff;
}

body::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: #ffffff;
}

.lis {
	overflow-y: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

.tools {
	display: flex;
	flex-wrap: wrap;
	width: 110px;
	height: 100vh;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tools li {
	width: 40px;
	height: 40px;
	margin-right: 5px;
	text-align: center;
	line-height: 40px;
	font-size: 0px;
	border-top: #dad7d9 solid 1px;
	background: #fefefe;
	cursor: pointer;
	position: relative;
}

.tools li:hover {
	background: #f2f1f2;
}

/* .tools li:hover p{
  display: block;
  font-size: 14px;
  background: #f2f1f2;
} */
.tools li p {
	/* display:none; */
	position: absolute;
	top: 11px;
	left: -10px;
	width: 60px;
	height: 20px;
	font-weight: 400;
	font-size: 1px;
	color: #000;
	background-color: rgba(0, 0, 0, 0) !important;
	z-index: 1;
}

.tools li.active {
	background: #e34f51;
}

.tools li img {
	width: 100%;
	height: 100%;
	margin-top: 0px;
}

.tools li .window1 {
	margin-top: 0px;
	width: 25px;
	height: 25px;

}

.tools li .window2 {
	margin-top: 10px;
	width: 25px;
	height: 5px;
	margin-bottom: 9px;
}

.tools li .window3 {
	margin-top: 10px;
	width: 30px;
	height: 15px;
	margin-bottom: 9px;
}

.tools li>.a {
	/* margin-top: 10px; */
	width: 25px;
	height: 25px;
}

.tools li .b {
	margin-top: 2px;
	width: 25px;
	height: 20px;
	/* margin-bottom: 9px; */
}

.tools li .c {
	margin-bottom: 0px;
	width: 30px;
	height: 30px;
	/* margin-bottom: 9px; */
}

.tools li .d {
	margin-top: 3px;
}

.tools li>.xiezi {
	font-size: 16px;
}

.hide {
	display: none;
}

#canvas {
	/* width: 1122px; */
	/* height: 100%; */
	/* background-image: url(../img/1.png); */
	background: url(../img/1.png) no-repeat;
	background-size:100% 100%;
	/* background-color: rgb(255, 255, 255); */
	/* border: 1px solid gray; */
	/* background-image:url(../img/1.png);
  background-color: #e34f51; */
}

/* #canvas{
  position: absolute;
  left: 0px;
  top: 40px;
  margin: 20px;
  background: #ffffff;
  border: thin solid #aaaaaa;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}  */

.topbtn {
	position: relative;
	top: 0;
}

.canvasDiv {
	position: relative;
	
	
	height: 94vh;
	/* width: 1080px;
  height: 600px; */
	/* width: 100%;
            height: 100%; */
	/* border: 1px solid red; */
	
	overflow: auto;
	margin-top: 10px;
	
	/* background: url(../img/canvas_bg.jpg) repeat; */
	background-color: #fff;
	margin-left: 95px;
}
/*  */
.canvasDiv::-webkit-scrollbar {
    -webkit-appearance: none;
}

.canvasDiv::-webkit-scrollbar:vertical {
    width: 20px;
}

.canvasDiv::-webkit-scrollbar:horizontal {
    height: 20px;
}

.canvasDiv::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

.canvasDiv::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}
/*  */

.icon-tools {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url("../img/tools-28.png");
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-color-gray {
	background-position: -0px -0px;
}

.icon-color-red {
	background-position: -28px -0px;
}

.icon-color-black {
	background-position: -56px -0px;
}

.icon-color-blue {
	background-position: -84px -0px;
}

.icon-color-select {
	background-position: -112px -0px;
}

.icon-eye-black {
	background-position: -140px -0px;
}

.icon-eye-select {
	background-position: -168px -0px;
}

.icon-noeye-black {
	background-position: -196px -0px;
}

.icon-noeye-select {
	background-position: -0px -28px;
}

.icon-grids-black {
	background-position: -28px -28px;
}

.icon-grids-select {
	background-position: -56px -28px;
}

.icon-nogrids-black {
	background-position: -84px -28px;
}

.icon-nogrids-select {
	background-position: -112px -28px;
}

.icon-pen-black {
	background-position: -140px -28px;
}

.icon-pen-select {
	background-position: -168px -28px;
}

.icon-move-black {
	background-position: -196px -28px;
}

.icon-move-select {
	background-position: -0px -56px;
}

.icon-text-black {
	background-position: -28px -56px;
}

.icon-text-select {
	background-position: -56px -56px;
}

.icon-dottedline-arrow-black {
	background-position: -84px -56px;
}

.icon-dottedline-arrow-select {
	background-position: -112px -56px;
}

.icon-line-black {
	background-position: -140px -56px;
}

.icon-line-select {
	background-position: -168px -56px;
}

.icon-dottedline-black {
	background-position: -196px -56px;
}

.icon-dottedline-select {
	background-position: -0px -84px;
}

.icon-arrow-black {
	background-position: -28px -84px;
}

.icon-arrow-select {
	background-position: -56px -84px;
}

.icon-circle-black {
	background-position: -84px -84px;
}

.icon-circle-select {
	background-position: -112px -84px;
}

.icon-ellipse-black {
	background-position: -140px -84px;
}

.icon-ellipse-select {
	background-position: -168px -84px;
}

.icon-square-black {
	background-position: -196px -84px;
}

.icon-square-select {
	background-position: -0px -112px;
}

.icon-rectangle-black {
	background-position: -28px -112px;
}

.icon-rectangle-select {
	background-position: -56px -112px;
}

.icon-rightangle-black {
	background-position: -84px -112px;
}

.icon-rightangle-select {
	background-position: -112px -112px;
}

.icon-equilateral-black {
	background-position: -140px -112px;
}

.icon-equilateral-select {
	background-position: -168px -112px;
}

.icon-isosceles-black {
	background-position: -196px -112px;
}

.icon-isosceles-select {
	background-position: -0px -140px;
}

.icon-isoscelesrighttriangle-black {
	background-position: -28px -140px;
}

.icon-isoscelesrighttriangle-select {
	background-position: -56px -140px;
}

.icon-remove-black {
	background-position: -84px -140px;
}

.icon-remove-select {
	background-position: -112px -140px;
}

.icon-clear-black {
	background-position: -140px -140px;
}

.icon-clear-select {
	background-position: -168px -140px;
}

.video-preview-modal-div {
	width: 69%;
	margin: 5% auto 0;
	text-align: center;
	background-color: #ffffff;
}

/********* 添加对错号 **************/
.icon-right-black {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../img/right.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-right-select {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../img/right-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-black {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../img/wrong.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-select {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../img/wrong-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-right-small-black {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../img/right-small.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-right-small-select {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../img/right-small-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-small-black {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../img/wrong-small.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-small-select {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../img/wrong-small-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-submit-black {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../img/submit.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-submit-select {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../img/submit-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}
